<template>
  <div class="app-container">
    <div class="time">
      <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            @change="blurTime"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
      </el-form>
    </div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="预存信息" name="prestoreInfo" >
        <info :user="row"></info>
        <div class="clean">
          <el-row>
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="科藤备注：" class="remark_s">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  rows="6"
                  style="width: 80%"
                />
              </el-form-item>
            </el-form>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预存记录" name="prestoreRecord">
        <preStoredRecords ref="prestoreRecord" :id="row['id']"></preStoredRecords>
      </el-tab-pane>

      <el-tab-pane label="使用记录" name="useRecord">
        <useRechargeRecord ref="useRecord" :id="row['id']"></useRechargeRecord>
      </el-tab-pane>

      <el-tab-pane label="变更记录" name="changeRecord">
        <chageRecord ref="changeRecord"  :id="row['id']"></chageRecord>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关闭</el-button>
      <el-button v-hasPermi="['userManager:user:edit']" @click="submitForm"
        >保存</el-button
      >
      <el-button type="primary" @click="updateOperation()">变更余额</el-button>
    </div>

    <chageRecharge
      title="变更余额"
      :visiable="visiable"
      :item="row"
      @close="close1"
    ></chageRecharge>
  </div>
</template>

<script>
import { updateUser } from '@/api/user'
import { close } from '@/jscomponent/recharge'

export default {
  data() {
    return {
      activeTab: 'prestoreInfo',
      row: undefined,
      visiable: false,
      dateRange: undefined,
      form: {
        remark: undefined
      }
    }
  },

  created() {
    let data = localStorage.getItem('depositItem')

    if (!data) {
      return
    }
    this.row = JSON.parse(data)

    this.form.id = this.row.id

    this.form.remark = this.row.remark
  },

  components: {
    info: () => import('./components/info.vue'),
    chageRecharge: () => import('./components/changeRecharge.vue'),
    preStoredRecords: () => import('./components/preStoredRecords.vue'),
    useRechargeRecord: () => import('./components/useRechargeRecord.vue'),
    chageRecord: () => import("./components/chageRecord.vue")
  },

  methods: {
    close,
    // 补丁
    close1(...args){
      this.close(...args);
      this.$refs.changeRecord.getList();
      localStorage.setItem('depositItem', JSON.stringify(this.row))
    },

    blurTime() {
      if (this.activeTab == 'prestoreInfo') {
        return
      }
      console.log(this.dateRange);
      this.$refs[this.activeTab].getList(this.dateRange || []);
    },

    // 取消按钮
    cancel() {
      this.$router.push({
        path: '/finance/deposit/index'
      })
    },

    /**
     * 变更余额
     * @param {{}} item
     * @param {String} key
     */
    updateOperation() {
      this.visiable = true
    },

    /**
     * 提交按钮
     **/
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }

        if (!this.form.remark) {
          this.$message.success('操作成功')
          return
        }

        updateUser(this.form).then((res) => {
          this.$message.success(res.msg)

          setTimeout(() => {
            this.$router.back()
          }, 500)
        })
      })
    }
  }
}
</script>

<style scoped>
@import url('../../../assets/styles/row_c.css');
.app-container{
  position: relative;
}
.time >>> .el-form {
  position: absolute;
  right: 40px;
  top: 15px;
  z-index: 99;
}

</style>
